<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>建规学院意见反馈</title>
    <link rel="stylesheet" href="/public/css/index.css">
    <style>
        html{
            font-size: 16px;
        }
        .main{
            padding: 2rem 10px;
            box-sizing: border-box;
        }

        .add_button {
            position: sticky;
            bottom: 20px;
            display: flex;

            /*border-radius: var(--radius);*/
        }
    </style>
    <script src="/public/js/vue.js"></script>
    <script src="https://mat1.gtimg.com/www/asset/lib/jquery/jquery/jquery-1.11.1.min.js"></script>
</head>
<body>
<div id="app" class="main">
    <template v-if="feedbackList.length">
        <div class="feedback_card" v-for="item in feedbackList" :key="item.feedbackId" @click="getFeedbackContent(item)">
            <img v-if="item.feedbackImageUrl !== 'null'" :src="item.feedbackImageUrl" alt="image" class="feedback_image">
            <div class="feedback_content">
                <div class="feedback_text">{{item.feedbackContent | strLen}}</div>
                <div class="feedback_time">{{item.feedbackTime}}</div>
            </div>
        </div>
    </template>
    <div v-else>
        还没有提交过反馈
    </div>
    <div class="add_button">
        <button class="button" onclick="location.reload()">刷新</button>
        <button class="button" @click="addFeedback">添加反馈</button>
    </div>

</div>
<script type="text/javascript">
    window.onload = init
    async function init() {
        try {
            const url = window.location.href
            const queryList = url.split("?")[1].split("&")
            const code = queryList.filter(item => item.includes("code="))[0].split("=")[1]

            await $.ajax('/user/login', {
                method: "post",
                processData: false,
                data: `code=${code}`,
                success: function (result) {
                    const {data, code} = result
                    if (code === 200) {
                        localStorage.setItem("userToken", data)
                    } else {
                        // alert(result.msg)
                    }

                },
                error: function (e) {
                    alert("发生错误，请联系管理员")
                    sessionStorage.clear()
                    localStorage.clear()
                    location.href = "/public/user/login.html"
                }
            })
        } catch (e) {
            if (!localStorage.getItem("userToken")) return location.href = "/public/user/login.html"

        }
        new Vue({
            el: "#app",
            data: {
                feedbackList: [
                    // {
                    //     feedbackId: "asdfasdf3eqer2319pjf3p",
                    //     feedbackContent: "这是一段文本，这是一段测试文本",
                    //     feedbackImageUrl: "https://7072-prod-7gcqv1ulb1045c10-1314529886.tcb.qcloud.la/images/1669949201225.png",
                    //     feedbackTime: "2022-12-02 10:50:27"
                    // },
                    // {
                    //     feedbackId: "1wehujg9083hunr20cpjc32",
                    //     feedbackContent: "这是一段文本，这是一段测试文本这是一段文本，这是一段测试文本,这是一段测试文本,这是一段测试文本",
                    //     feedbackImageUrl: "https://7072-prod-7gcqv1ulb1045c10-1314529886.tcb.qcloud.la/images/1669949201225.png",
                    //     feedbackTime: "2022-12-05 10:50:27"
                    // }
                ]
            },
            mounted() {
                this.getFeedbackList()
            },
            methods: {
                addFeedback() {
                    window.location.href = "/public/user/addFeedback.html"
                },
                getFeedbackContent(feedback) {
                    sessionStorage.setItem("nowFeedback", JSON.stringify(feedback))
                    sessionStorage.setItem("nowRole", "0")
                    location.href = "/public/admin/feedbackContent.html"
                },
                getFeedbackList() {
                    const that = this
                    $.ajax('/user/getFeedbackList', {
                        method: "get",
                        // contentType: false,
                        processData: false,
                        headers: {
                            "Authorization": `Bearer ${localStorage.getItem("userToken")}`
                        },
                        success: function (result) {
                            const {data, code} = result
                            if (code === 200) {
                                that.pageNum++
                                that.feedbackList = data.map(item => ({
                                    feedbackId: item['feedback_id'],
                                    feedbackContent: item['feedback_content'],
                                    feedbackImageUrl: item['feedback_image_url'],
                                    /* 时间格式化处理 */
                                    feedbackTime: item['feedback_time'].replace(/T|.[\dA-Z]{4}$/g, " ")
                                }))
                            } else {
                                alert(result.msg)
                            }

                        },
                        error: function () {
                            alert("发生错误，请联系管理员")
                            sessionStorage.clear()
                            localStorage.clear()
                            location.href = "/public/user/login.html"
                        }
                    })
                },
            },
            filters: {
                strLen(str, len = 30) {
                    let newStr = str
                    if (newStr.length > len) {
                        newStr = newStr.slice(0, len) + "..."
                    }
                    return newStr
                }
            }
        })
    }

</script>
</body>
</html>
